<!--
 * @Author: wang_changtan 2196064304@qq.com
 * @Date: 2024-02-20 09:33:16
 * @LastEditors: wang_changtan 2196064304@qq.com
 * @LastEditTime: 2024-02-24 09:30:43
 * @FilePath: /web_music_app_vue3_vite_ts/src/components/Header/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="header">
        <div class="user">
            <el-avatar :size="30" :src="circleUrl" />

            <el-tooltip class="box-item" effect="dark" content="故人北上" placement="bottom-start">
                <div class="ell" style="padding-left: 10px;width: 100px">故人北上</div>
            </el-tooltip>

        </div>
        <div class="r">
            <div class="r_tab">
                <div style="padding-right: 10px;">
                    <el-icon @click="goBackLeft" :class="backLeft.length > 0 ? '' : 'disabled-icon'">
                        <ArrowLeft />
                    </el-icon>
                    <el-icon @click="goBackRight" :class="backRight.length > 0 ? '' : 'disabled-icon'"
                        style="margin-left: 15px;">
                        <ArrowRight />
                    </el-icon>
                </div>
                <div 
                v-show="!isDetail"
                style="display: flex;align-items:center;">
                    <div v-for="(tab, i) in tabs" :key="i" style="margin-left: 20px;" class="tab_item"
                    :class="currentPath !== tab.router ? 'noSelect' : ''" @click="tabClick(tab)">
                    {{ tab.name }}
                </div>
                </div>
            </div>
            <div class="r_setting">
                <el-input style="padding: 0 15px;" size="small" class="w-50 m-2 el-input-search" placeholder="搜索"
                    @focus="searchFocus" @blur="searchBlur">
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <search />
                        </el-icon>
                    </template>
                </el-input>
                <el-icon class="icon">
                    <Setting />
                </el-icon>
                <el-icon class="icon">
                    <ChatDotSquare />
                </el-icon>
                <el-popover placement="bottom" :width="200" trigger="click">
                    <template #reference>
                        <el-icon class="icon">
                            <img style="width: 18px;" :src="theme === 'red' ? yfRedSvg : yfSvg" alt="">
                        </el-icon>
                    </template>
                    <div class="color">
                        <div class="color_item" @click="changeTheme('default')">
                            <div class="c_color" style="background-color: #f6f6f6;"></div>
                            <div class="c_f">浅色</div>
                            <el-icon v-if="theme === 'default'" class="color_sel"><Select /></el-icon>
                        </div>
                        <div class="color_item" @click="changeTheme('red')">
                            <div class="c_color" style="background-color: #d33a31;"></div>
                            <div class="c_f">红色</div>
                            <el-icon v-if="theme === 'red'" class="color_sel"><Select /></el-icon>
                        </div>
                        <div class="color_item" @click="changeTheme('dark')">
                            <div class="c_color" style="background-color: #202020;"></div>
                            <div class="c_f">深色</div>
                            <el-icon v-if="theme === 'dark'" class="color_sel"><Select /></el-icon>
                        </div>
                        <div class="color_item" @click="changeTheme('auto')">
                            <div class="c_color" style="background: linear-gradient(to bottom, #ffffff 0%, #000 100%);">
                            </div>
                            <div class="c_f">自动</div>
                            <el-icon v-if="theme === 'auto'" class="color_sel"><Select /></el-icon>
                        </div>
                    </div>
                </el-popover>

            </div>
        </div>

        <div v-if="showSearch" class="search_pop">
            131321
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { setTheme } from "@/assets/style/theme"
import yfSvg from "@/assets/svg/yf.svg";
import yfRedSvg from "@/assets/svg/yf_red.svg";
import { ref, onMounted, onUpdated, onUnmounted, computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import useGlobalStore from "../../store/modules/global";
//获取小仓库对象
let globalStore = useGlobalStore();

const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png');

let showSearch = ref(false);
let timeOut = ref(null);
let isDetail = ref(false);
const tabs = ref([
    { k: 1, name: '个性推荐', router: '/home' },
    { k: 2, name: '歌单', router: '/songSheet' },
    { k: 3, name: '排行榜', router: '/charts' },
    { k: 4, name: '歌手', router: '/singer' },
    { k: 5, name: '最新音乐', router: '/new' },
])


// 后退
let backLeft: any | [] = computed(() => globalStore.backLeft);
let backRight: any | [] = computed(() => globalStore.backRight);

// 当前路由
const currentPath = computed(() => globalStore.currentPath);

let theme = ref('auto');
const searchFocus = () => {
    showSearch.value = true;
}
const searchBlur = () => {
    showSearch.value = false;
}


// 切换皮肤
const changeTheme = (type: string) => {
    theme.value = type;
    // 移除计时器
    removeClearInterval();
    if (type === 'auto') {
        computeTime();
        timeOut.value = setInterval(computeTime, 60000);
    } else {
        setTheme(type);
        // 更新pina仓库
        globalStore.updateStateByKey('themeName', type);
    }
    // 缓存
    if (type) {
        localStorage.setItem("themeName", type)
    }


}
// 切换tab
const tabClick = (tab: { k: number, router: string }) => {
    // selectIndex.value = tab.k;

    if (currentPath.value === tab.router) {
        return;
    }

    // console.log(router)
    globalStore.updateStateByKeys({
        backLeft: [
            ...globalStore.backLeft,
            currentPath.value
        ],
        backRight: []
    });

    router.push(tab.router);
}

// 组件挂载
onMounted(() => {
    let theme: string = localStorage.getItem("themeName") || "default";


    changeTheme(theme);
})

// 组件卸载
onUnmounted(() => {

    // 移除计时器
    removeClearInterval();
})

// 监听
onUpdated(() => {
    console.log('theme.value', theme.value)
})
// 移除计时器
const removeClearInterval = () => {
    if (timeOut.value) {
        clearInterval(timeOut.value);
        timeOut.value = null;
    }

}

// 计算时间，自动切换衣服
const computeTime = () => {

    // 早上7:00 - 下午6：00 default, 否则dark
    const now = new Date();
    const sunrise = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 7); // 日出时间，可以根据实际情况调整
    const sunset = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18); // 日落时间，可以根据实际情况调整
    let theme = (now > sunrise && now < sunset) ? 'default' : 'dark';
    // localStorage.setItem("themeName", 'theme');
    setTheme(theme);
    // 更新pina仓库
    globalStore.updateStateByKey('themeName', theme);
}
// 监听页面路由
// 监听路由变化
router.beforeEach((to, from, next) => {
    // console.log('路由即将改变：', from, '->', to);
    isDetail.value = false;
    if (to.path.indexOf('detail') !== -1) {
        isDetail.value = true;
    }
    globalStore.updateStateByKey('currentPath', to.fullPath);
    next();
});


const goBackLeft = () => {
    let newL = [...backLeft.value]
    let left = newL.pop();

    globalStore.updateStateByKeys({
        backLeft: newL,
        backRight: [
            ...backRight.value,
            currentPath.value
        ]
    });
    // console.log('left',newL)
    router.push(left);
}
const goBackRight = () => {
    let newL = [...backRight.value]
    let right = newL.pop();

    globalStore.updateStateByKeys({
        backRight: newL,
        backLeft: [
            ...backLeft.value,
            currentPath.value
        ]
    });
    router.push(right);
}


</script>

<style lang="less" scoped>
.header {
    height: 48px;
    width: 100%;
    background-color: @headBgColor;
    display: flex;
    align-items: center;

    .user {
        width: 180px;
        display: flex;
        align-items: center;
        padding-left: 15px;
        cursor: pointer;

        &,
        div {
            color: @userColor;
            font-size: 14px;
        }
    }

    .r {
        width: calc(100% - 180px);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .r_tab {
            display: flex;
            align-items: center;
            font-size: 14px;

            .tab_item {
                cursor: pointer;
            }

            color: @tabItemSelectedColor;
            font-weight: 600;

            .noSelect {
                font-weight: 400;
                color: @tabItemColor;

                &:hover {
                    color: @headHoverColor;
                }
            }
        }

        .r_setting {
            display: flex;
            align-items: center;
            padding-right: 15px;

            .icon {
                margin: 0 5px;
                padding: 6px;
                border-radius: 50%;
                cursor: pointer;
                color: @tabItemColor;

                &:hover {
                    background-color: @headIconHoverBg;
                }

            }



        }
    }

}

.color {
    display: flex;
    justify-content: space-around;

    .color_item {
        position: relative;
        cursor: pointer;
    }

    .c_color {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 14px;
    }

    .c_f {
        padding-top: 8px;
        font-size: 13px;
        color: #b2b2b2;
    }

    .color_sel {
        position: absolute;
        left: 4px;
        top: 4px;
        color: #fff;
    }
}

.search_pop {
    position: absolute;
    right: 0;
    top: 48px;
    width: 300px;
    height: calc(100% - 90px);
    background: @mainBgColor;
    box-shadow: 0px 0px 3px 0px #ddd;
    color: @color;
}
</style>

<style lang="less">
.header {

    .el-input-search {
        .el-input__wrapper {
            box-shadow: none !important;
            border-radius: 18px !important;
            background-color: @searchBgColor;

            .el-input__icon {
                color: @tabItemColor;
            }

            .el-input__inner::placeholder {
                color: @tabItemColor;
            }
        }

    }

    .r_tab {
        .el-icon {
            padding: 8px;
            border-radius: 50%;
            cursor: pointer;
            color: @userColor;
            font-size: 18px;

            &:hover {
                background-color: @headIconHoverBg;
            }
        }

        .disabled-icon {
            color: @backLeftIconDisColor;

            &:hover {
                background-color: initial !important;
            }
        }
    }

}
</style>